<template>
  <div id="app2">
    <sidebar @menu-selected="updateSelectedMenu" :mokid="mokid" />
    <content-area :selected-menu="selectedMenu" :mokid="mokid" />
  </div>
</template>

<script>
import Sidebar from "./Sidebar.vue";
import ContentArea from "./ContentArea.vue";

export default {
  name: "App",
  components: {
    Sidebar,
    ContentArea
  },

  data() {
    return {
      mokid: "", // mokid 将通过 URL 参数获取
      selectedMenu: {},
    };
  },

  watch: {
    $route: {
      handler(newRoute) {
        if (newRoute.query.mokid) {
          this.mokid = newRoute.query.mokid;
          console.log("newRoute.query.mokid: " + this.mokid);
        }
      },
      immediate: true,
    },
  },

  mounted() {
        
  },

  methods: {
    updateSelectedMenu(menu) {
      if (menu) this.selectedMenu = menu;
    },
  },
};
</script>

<style>
#app2 {
  display: flex;
  height: 100vh;
  padding-left: 10%; /* 左侧留白 */
  padding-right: 10%; /* 右侧留白 */
}
</style>
